<template>
  <div>
      <Breadcrmb title1="首页" title2="订单管理" title3="订单列表"></Breadcrmb>

      <el-card style="margin-top:20px">
        <el-row :gutter="20">
           <el-col :span="8">
               <el-input placeholder="请输入内容" clearable v-model="queryInfo.query" @clear="getOrders" >
               <el-button slot="append" icon="el-icon-search" @click="getOrders" ></el-button>
               </el-input>
           </el-col>
        </el-row>

        <el-table :data="tableData" style="width: 100%">
           <el-table-column prop="order_number" label="订单编号">
           </el-table-column>
           <el-table-column prop="order_price" label="订单价格">
           </el-table-column>
           <el-table-column prop="pay_status" label="是否付款">
            <template scope="scope">
                <el-tag type="warning" size="mini" v-if="scope.row.pay_status==0">未付款</el-tag>
                <el-tag type="success" size="mini" v-if="scope.row.pay_status==1">已付款</el-tag>
            </template> 
           </el-table-column>
           <el-table-column prop="is_send" label="是否发货">
           </el-table-column>
           <el-table-column prop="create_time" label="下单时间">
              <template scope="scope">{{date(scope.row.create_time)}}</template>
           </el-table-column>
           <el-table-column label="操作">
               <template slot-scope="scope">
             <el-button size="mini" type="primary" icon="el-icon-edit" @click="toView(scope.row)"></el-button>
             <el-button size="mini" type="danger" icon="el-icon-delete" @click='del(scope.row)'></el-button>
             </template>
           </el-table-column>
        </el-table>
        
        <el-pagination @size-change="handleSizeChange" style="text-align: center;" :page-sizes="[2, 5, 10]" @current-change="handleCurrentChange" :page-size="queryInfo.pagesize" :current-page="queryInfo.pagenum" layout="total,sizes, prev, pager, next,jumper" :total="total">
        </el-pagination>

      </el-card>
  </div>
</template>

<script>
export default {
    data(){
        return{
            searchInput:'',
            tableData:[],
            total: 0, //总记录数
            dialogVisible: false,
            queryInfo:{
              pagesize:10,
              pagenum:1,
              query:''
          },
        }
    },
    created(){
       this.getOrders();
    },
    methods:{
        date(time){
          //把getTime()转年月日时分秒
           var date= new Date(time);
          var yy=date.getFullYear();
          var MM=date.getMonth()+1;
          var dd=date.getDate();
          var HH=date.getHours();
          var mm=date.getMinutes();
          var ss=date.getSeconds();
          return `${yy}-${MM}-${dd} ${HH}:${mm}:${ss}`;
        },
        async getOrders(){
             var {data:res}=await this.request.get("orders",{params:this.queryInfo});
            console.log(res);
            if(res.meta.status !==200){
                return this.$message.error("获取用户列表失败！")
            }
            this.tableData=res.data.goods;
            this.total=res.data.total;
        },
        handleSizeChange(size) {
            this.queryInfo.pagesize = size;
            this.getOrders();
        },
        handleCurrentChange(num) {
            this.queryInfo.pagenum = num;
            this.getOrders();
        }
    }
}
</script>

<style>

</style>